<template>
  <el-card class="card-box" shadow="never">
    <common-title type='custom' title='A类项目概览'>
      <div class="right">
        <span>金额单位：万元</span>
        <!-- <el-select v-model="year" placeholder="请选择" size="small" style="width: 100px" @change='changeYear'>
          <el-option v-for="item in yearList" :key="item" :label="item" :value="item" />
        </el-select> -->
      </div>
    </common-title>

    <div class='content' v-if='statictisData?.length'>
      <div class='project' :class='setClass(item)' v-for='item in statictisData' :key="item.projectId">
        <p class="project-title">{{item?.projectName}}</p>
        <div class="status mark"></div>
        <div class="project-box">
          <div class='project-box-left'>
            <p class="sub">立项批准金额</p>
            <div class="money">¥{{roundToDecimal(item?.projectSectionStatictisDto?.approvalAmount)}}</div>
            <dashboard :colorS="setColor(item)" :progressData='item'></dashboard>
          </div>

          <div class='project-box-right'>
            <ul class="list-wrap list-two">
              <li>
                <p>合同金额/数量</p>
                <div>¥ {{toWanUnit(roundToDecimal(item?.projectSectionStatictisDto?.contractAmount))}}<span>/ {{item?.projectSectionStatictisDto?.contractCount}} 项</span></div>
              </li>

              <li>
                <p>项目投资附加费</p>
                <div>¥ {{toWanUnit(roundToDecimal(item?.projectSectionStatictisDto?.investmentAdditionalFee))}}</div>
              </li>
            </ul>

            <ul class="list-wrap list-two">
              <li>
                <p>材料到货批次</p>
                <div>-- <i>批</i></div>
              </li>

              <li>
                <p>隐蔽工程检查</p>
                <div>-- <i>次</i></div>
              </li>
            </ul>

            <ul class="list-wrap list-one">
              <li>
                <p>项目验收金额/数量</p>
                <div>¥ {{toWanUnit(roundToDecimal(item?.projectSectionStatictisDto?.acceptanceAmount))}}<span>/ {{item?.projectSectionStatictisDto?.acceptanceCount}} 项</span></div>
              </li>
            </ul>

            <ul class="list-wrap list-three">
              <li>
                <p>付款金额</p>
                <div>¥{{toWanUnit(roundToDecimal(item?.projectPaymentStatictisDto?.paymentAmount))}}</div>
              </li>

              <li>
                <p>预转固金额</p>
                <div>¥{{toWanUnit(roundToDecimal(item?.projectPaymentStatictisDto?.beforeTransferAmount))}}</div>
              </li>

              <li>
                <p>正式转固金额</p>
                <div>¥{{toWanUnit(roundToDecimal(item?.projectPaymentStatictisDto?.formalTransferAmount))}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <el-empty :image-size="120" description="暂无数据" v-else></el-empty>
  </el-card>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from "vue";
  import {
    getStatictisA
  } from "/@/api/board";
  import NotifMessage from "/@/utils/message/notification";
  import {roundToDecimal,toWanUnit} from  "/@/utils/func";
  import commonTitle from "./commonTitle.vue";
  import dashboard from "./dashboard.vue";
  const classS = {
    1: "product",
    2: "test-run",
    3: "construct"
  }
  const colorS = {
    1: { axisColor: '#DCF7D8', gradientStart: '#2EB82E', gradientEnd: '#9DEB87' },
    2: { axisColor: '#E6F2FF', gradientStart: '#0073E5', gradientEnd: '#8BC5FF' },
    3: { axisColor: '#FEF0D3', gradientStart: '#FAAD14', gradientEnd: '#FFD633' }
  }
  const currentYear = new Date().getFullYear();
  const year = ref(currentYear)
  const yearList = [currentYear, currentYear - 1, currentYear - 2, currentYear - 3, currentYear - 4]
  const statictisData = ref([])
  //获取项目数据
  const getStatictisData = async () => {
    try {
      const { code, data, message } = await getStatictisA(0);
      if (code === 200) {
        statictisData.value = data;
        // "progress": 1已投产, 2试运行, 3建设中
      }
      else {
        NotifMessage.error(message || "获取数据异常");
      }
    } catch (err) {
      console.log(err);
    }
  };

  const setClass=  (item) => {
    return classS[item?.projectSectionStatictisDto?.progress] || classS["1"]
  };

  const setColor=  (item) => {
    return colorS[item?.projectSectionStatictisDto?.progress] || colorS["1"]
  };

  const changeYear =  async () => {
    getStatictisData();
  };

  onMounted(() => {
    getStatictisData();
  });
</script>

<style lang="scss" scoped>
  .card-box {
    width: 100%;
    border-radius: 8px;
    box-shadow: none !important;

    :deep(.el-card__body) {
      padding: 10px 12px 0 2px;
    }

    .right {
      display: flex;
      align-items: center;

      span {
        font-size: 12px;
        color: #999999;
        margin-right: 16px;
      }

      :deep(.el-select) {
        line-height: 28px;

        .el-input--small {
          line-height: 28px;
        }

        .el-input__inner {
          border-color: #2A61FF;
          height: 28px;
          line-height: 28px;
          font-size: 12px;
          color: #2A61FF
        }

        .el-select__caret {
          color: #2A61FF;
        }

        .el-input__icon {
          line-height: 28px;
        }
      }
    }

    .content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 2px 12px 0 12px;
      .project {
        position: relative;
        width: 49.5%;
        // height:194px;
        background: url("../img/production.png") no-repeat center;
        background-size: 100% 100%;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
        &-title {
          padding-left: 60px;
          margin-bottom: 8px;
          font-size: 16px;
          font-weight: 500;
          color: #1E1E1E;
        }

        &-box {
          display: flex;
          justify-content: space-between;
          &-left {
            width: 32%;
            padding: 12px 12px 0 12px;
            border-radius: 8px;
            background: #FFFFFF;

            .sub {
              font-size: 12px;
              font-weight: bold;
              color: #3D3D3D;
            }

            .money {
              font-size: 24px;
              font-weight: bold;
              color: #333333;
              margin-bottom: 16px;
            }
          }

          &-right {
            width: 67%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .list-wrap {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 12px;
              border-radius: 8px;
              background: #FFFFFF;

              li {
                p {
                  font-size: 12px;
                  line-height: 20px;
                  color: #666666;
                }

                div {
                  font-size: 14px;
                  font-weight: bold;
                  margin-top: 8px;
                  color: #333333;

                  span {
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 20px;
                    margin-left: 4px;
                  }
                }
              }

              // li:not(:last-child){
              //   width: 30%;
              //   background: url(../img/diver.png) no-repeat right center;
              // }
            }
          }

          .list-one {
            width: 30%;
          }

          .list-two {
            width: 49%;
            margin-bottom: 8px;
          }

          .list-three {
            width: 68%;
          }
        }

        .status {
          position: absolute;
          top: 0;
          left: 0;
          width: 70px;
          height: 37px;
        }
        .mark {
          background: url("../img/production_status.png") no-repeat center;
          background-size: 100%;
        }
      }
      // .project:nth-last-child(-n + 1) {
      //   margin-bottom: 0;
      // }
      .product{
        background: url("../img/production.png") no-repeat center;
        background-size: 100% 100%;
      }
      .test-run {
        background: url("../img/test_run.png") no-repeat center;
        background-size: 100%;

        .mark {
          background: url("../img/test_run_status.png") no-repeat center;
          background-size: 100%;
        }
      }
      .construct {
        background: url("../img/construct.png") no-repeat center;
        background-size: 100%;

        .mark {
          background: url("../img/construct_status.png") no-repeat center;
          background-size: 100%;
        }
      }
    }
  }
</style>
